<template>
    <div id="tmpl">
        <!--1.0 图片分类-->
        <div id="cate">
            <ul v-bind="{style: 'width:' + ulWidth + 'px'}">
                <li @click="getimages(0)">全部</li>
                <li v-for="item in cates" @click="getimages(item.id)" >{{item.title}}</li>
            </ul>
        </div>
        <!--2.0 图片列表-->
        <div id="imglist">
            <ul>
                <li v-for="item in list">
                    <router-link v-bind="{to: '/photo/photoinfo/' + item.id}">
                        <img v-lazy="item.img_url">
                        <div id="desc">
                            <h5 v-text="item.title"></h5>
                            <p v-text="item.zhaiyao"></p>
                        </div>
                    </router-link>
                </li>
            </ul>

        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    import common from '../../kits/common.js';
    export default {
        data() {
            return {
                ulWidth: 0,
                cates: [], //用来存储图片分类得到的数组
                list: [] //存储图片的数组
            }
        },
        created() {
            //1.0获取图片分类数据
            this.getcates();


            //2. 加载图片数据
            var all = 0; //虎丘所有数据
            this.getimages(all);
        },
        methods: {
            //2.0 加载图片数据
            getimages(cateid) {
                // 0.0 如果方法的cateid参数没有传递值，则默认是0，代表获取所有的图片数据
                cateid = cateid || 0;

                //1.0 确定url
                var url = common.apidomain + "/GetImgs?id=" + cateid;

                //2. ajax请求
                this.$http.get(url).then(function (resp) {
                    var body = resp.body;
                    if (body.status != 0) {
                        Toast(resp.body.message);
                        return;
                    }
                    //将数据赋值给this.list
                    this.list = body.message;
                })
            },
            getcates() {
                //1.0确定url
                var url = common.apidomain + "/Cates";

                //2.0调用ajax
                this.$http.get(url).then(function (resp) {
                    if (resp.body.status != 0) {
                        Toast(resp.body.message);
                        return;
                    }
                    //3.0 赋值
                    this.cates = resp.body.message;


                    //4.0 实现当前分类数据所在的ul总宽度 = 分类个数*每个分类数据的宽度
                    var w = 78;
                    var count = resp.body.message.length+1;

                    var totalWidth = w * count;
                    this.ulWidth = totalWidth;

                })
            }
        }
    }
</script>

<style scoped>
    #cate {
        max-width: 320px;
        width: 320px;
        overflow-x: auto;
    }
    #cate ul {
        margin: 0px;
        padding-left: 10px;
    }
    #cate li {

        list-style: none;
        display: inline-block;
        color: #0094ff;
        padding-left: 10px;
    }

    /*实现图片列表样式*/
    #imglist {}
    #imglist ul {
        padding-left: 0px;
    }
    #imglist li {
        list-style-type: none;
        position: relative;
    }

    #imglist img{
        width: 100%;
        height: 300px;
    }
    /*子绝，父相，实现父子嵌套*/
    #desc{
        width:100%;
        background-color: rgba(0,0,0,0.2);
        position: absolute;
        bottom: 2px;
        left: 0px;
    }
    #desc h5{
        color: #fff;
        font-weight: bold;
    }
    #desc p{
        color: #fff;
    }
    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }


</style>